<template>
  <view class="new-users copy-data" :style="{height:pageHeight}">
    <view class="top" :style="colorStyle">
      <!-- #ifdef MP || APP-PLUS -->
      <view class="sys-head">
        <view class="sys-bar" :style="{height:sysHeight}"></view>
        <!-- #ifdef MP -->
        <view class="sys-title" :style="member_style==3?'color:#333':''">个人中心</view>
        <!-- #endif -->
        <view class="bg" :style="member_style==3?'background:#f5f5f5':''"></view>
      </view>
      <!-- #endif -->
    </view>
    <view class="mid" style="flex:1;overflow: hidden;" :style="colorStyle">
      <scroll-view :scroll-y="true" style="height: 100%;">
        <view class="head">
          <view class="user-card">
            <view class="bg"></view>
            <view class="user-info">
              <view>
                <view class="avatar-box">
                  <image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar"
                         @click="gosetting">
                  </image>
                  <image v-else class="avatar" src="/static/images/f.png" @click="goEdit()">
                  </image>

                </view>

              </view>
              <view class="info">

                <view class="name" v-if="userInfo.union_code">
                  {{ userInfo.nickname }}
                  <image class="live" :src="userInfo.vip_icon" v-if="userInfo.vip_icon"></image>
                  <view class="vip" v-if="userInfo.is_money_level> 0 && userInfo.svip_open">
                    <image src="/static/images/svip.png"></image>
                  </view>
                </view>
                <view class="num" v-if="userInfo.account">
                  <view class="num-txt">ID：{{ userInfo.union_code }}</view>

                </view>

              </view>
              <view class="message">
                <navigator url="/pages/mine/setting/setting" hover-class="none">
                  <view class="iconfont icon-shezhi  "></view>
                </navigator>
              </view>
              <view class="message">
                <navigator url="/pages/index/officialNotice" hover-class="none">
                  <view v-if="userInfo.count_msg" class="num">
                    {{ userInfo.msg_count >= 100 ? '99+' : userInfo.count_msg }}
                  </view>

                  <view class="iconfont icon-s-kefu"></view>
                </navigator>
              </view>


            </view>
            <view class="num-wrapper">
              <view class="num-item" v-if="userInfo.money" @click="goPath('/pages/mine/balance/index',true)">
                <text class="num">{{ userInfo.money || 0 }}</text>
                <view class="txt">余额</view>
              </view>
              <view class="num-item"
                    @click="goPath('myCollects')">
                <text class="num">{{ userInfo.count_collect || 0 }}</text>
                <view class="txt">收藏</view>
              </view>

              <view class="num-item">
                <text class="num">{{ userInfo.point || 0 }}</text>
                <view class="txt">积分</view>
              </view>
            </view>

          </view>


        </view>
        <!-- 轮播 -->
        <view class="slider-wrapper" v-if="bannerList.length>0">
          <swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
                  :duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
            <block v-for="(item,index) in bannerList" :key="index">
              <swiper-item>
                <view @click="goUrl(item)" class='slide-navigator acea-row row-between-wrapper'
                      hover-class='none'>
                  <image :src="item.pic" class="slide-image"></image>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
        <!-- 会员菜单 -->
        <view class="user-menus" style="margin-top: 20rpx;">
          <view class="menu-title">我的服务</view>
          <view class="list-box">

            <view class="item" @click="goOrder('index')">
              <image src="/static/images/mine/mine/order.png"></image>
              <text>我的订单</text>
            </view>

            <view class="item" @click="goPath('myCollects')">
              <image src="/static/images/mine/mine/collection.png"></image>
              <text>我的收藏</text>
            </view>

            <view class="item" @click="goPath('browsing')">
              <image src="/static/images/mine/mine/browsing.png"></image>
              <text>我的足迹</text>
            </view>

            <view class="item" @click="goPath('/pages/mine/balance/withdraw',true)">
              <image src="/static/images/mine/mine/tixian.png"></image>
              <text>余额提现</text>
            </view>

            <view class="item" @click="goPath('link')">
              <image src="/static/images/mine/mine/link.png"></image>
              <text>万能转链</text>
            </view>


          </view>
        </view>
        <view class="user-menus" style="margin-top: 20rpx;">
          <view class="menu-title">常用工具</view>
          <view class="list-box">

            <view class="item" @click="goPath('feedback')">
              <image src="/static/images/mine/mine/feedback.png"></image>
              <text>意见反馈</text>
            </view>

            <view class="item" @click="goPath('customerSevice')">
              <image src="/static/images/mine/mine/kefu.png"></image>
              <text>专属客服</text>
            </view>
            <view class="item" @click="goPath('helpCenter')">
              <image src="/static/images/mine/mine/helpCenter.png"></image>
              <text>帮助中心</text>
            </view>
            <!-- #ifdef APP-PLUS -->
            <view class="item" @click="checkUpdata()">
              <image src="/static/images/mine/mine/version.png"></image>
              <text>版本更新</text>
            </view>
            <!-- #endif -->

            <view class="item" @click="shareApp()">
              <image src="/static/images/mine/mine/share.png"></image>
              <text>分享应用</text>
            </view>
          </view>
        </view>

        <view class="uni-p-b-98"></view>
      </scroll-view>
    </view>
    <u-popup v-model="shareShow" mode="bottom" border-radius="14" height="auto">
      <view class="share-container colCen">
        <view class="share-title rowCenCen">
          <view class="title-text">
            分享到
          </view>
        </view>
        <view class="shareList rowCen">
          <view class="items-container colCen" @tap='shareto()'>
            <view class="icon-box defIcon">
              <image src="/static/images/mine/mine/wxshare.png" mode=""></image>
            </view>
            <view class="modeName">
              微信好友
            </view>
          </view>
          <view class="items-container colCen" @tap="shareto()">
            <view class="icon-box defIcon">
              <image src="/static/images/mine/mine/sharefriend.png" mode=""></image>
            </view>
            <view class="modeName">
              朋友圈
            </view>
          </view>
          <view class="items-container colCen" @tap="shareto()">
            <view class="icon-box defIcon">
              <image src="/static/images/mine/mine/shareqq.png" mode=""></image>
            </view>
            <view class="modeName">
              QQ
            </view>
          </view>
          <view class="items-container colCen" @tap="shareto()">
            <view class="icon-box defIcon">
              <image src="/static/images/mine/mine/shareurl.png" mode=""></image>
            </view>
            <view class="modeName">
              复制链接
            </view>
          </view>
        </view>

        <view class="cancelbox rowCenCen" @click="closeModel()">
          <view class="canceltext">
            取消
          </view>
        </view>
      </view>
    </u-popup>

    <u-toast ref="uToast"/>

  </view>
</template>
<script>
import APPUpdate from "@/utils/appUpdate.js";

let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {

  data() {
    return {
      colorStyle: '--view-theme: rgba(233,51,35,1);--view-theme-16: #e93323;--view-priceColor:#e93323;--view-minorColor:rgba(233, 51, 35, 0.5);--view-minorColorT:rgba(233, 51, 35, 0.1);--view-bntColor:#FE960F;--view-op-ten: rgba(233,51,35, 0.1);--view-main-start:#FF6151; --view-main-over:#e93323;--view-op-point-four: rgba(233,51,35, 0.04);',
      storeMenu: [], // 商家管理

      bannerList: [],
      autoplay: true,
      circular: true,
      interval: 3000,
      duration: 500,
      userInfo: {},
      sysHeight: sysHeight,
      mpHeight: 0,
      showStatus: 1,
      newData: {},
      activeRouter: '',

      pageHeight: '100%',
      routineContact: 0,


      member_style: 1,
      shareShow: false,
    }
  },
  onLoad(option) {
    console.log(sysHeight)
  },
  onReady() {

  },
  onShow: function () {
    const bs_token = uni.getStorageSync('bs_token');
    if (!bs_token) {
      uni.redirectTo({
        url: '../login/login'
      })
    }
    this.getbanner()
    this.getUserinfo()
  },
  onPullDownRefresh() {

  },
  methods: {
    getUserinfo() {
      this.$http.get('union/api.member/getInfo', {}, true).then((data) => {
        //console.log(data)
        this.userInfo = data
      })
    },
    getbanner() {
      this.$http.get('union/api.home/banner_list/from/user').then((data) => {
        this.bannerList = data;
      })
    },
    goPath(url, isFull) {
      console.log(url,isFull)
      uni.navigateTo({
        url: isFull===true ? url : ('./tools/' + url)
      })
    },
    shareApp() {
      this.shareShow = true
    },
    closeModel() {
      this.shareShow = false
    },
    shareto(type) {
      this.$http.post('union/api.member/share', {
        "type": 14
      }, 'application/json').then(res => {
        console.log(res, 'share')

        uni.setClipboardData({
          data: res.info,
          success: (ss) => {
            uni.hideToast()
            //console.log('success');
            this.closeModel()
            this.$refs.uToast.show({
              title: '复制成功，快去分享吧~',
              type: 'default',
              position: 'bottom'
            })
          }
        });

        uni.setStorage({
          key: 'clipboard',
          data: res.info,
          success: res => {
            //console.log('succes');
          }
        })
      })
    },
    goUrl(info) {


      if (info.urlType == '0') {
        //#ifdef H5
        if (info.url) {
          return location.href = info.url;
        }
        //#endif
        uni.navigateTo({
          url: '../webView/webView?url=' + info.url
        })
      } else if (info.urlType == 1) {
        uni.navigateTo({
          url: info.url
        })
      } else if (info.urlType == '2') {
        //#ifdef H5
        if (info.url) {
          return location.href = info.url;
        }
        //#endif
        // #ifdef APP-PLUS
        if (plus.os.name == 'Android') {
          //console.log(plus.os.name);
          plus.runtime.openURL(info.url, res => {
            uni.navigateTo({
              url: '../webView/webView?url=' + info.url
            })
          }, 'com.taobao.taobao');
        } else {
          info.url = info.url.split('//')[1]
          plus.runtime.openURL('taobao://' + info.url, function (res) {
            uni.navigateTo({
              url: '../webView/webView?url=' + info.url
            })
          }, 'taobao://');
        }
        // #endif
      }
    },

    goOrder(url) {
      uni.navigateTo({
        url: './order/' + url
      })
    },
    gosetting() {
      uni.navigateTo({
        url: './setting/setting'
      })
    },
    cpr_version(a, b) {
      var _a = this.toNum(a),
          _b = this.toNum(b);
      if (_a == _b) return false
      if (_a < _b) return false
      if (_a > _b) return true
    },
    checkUpdata() {
      // #ifdef APP-PLUS
      this.$http.get("union/api.app/appversion", {
        equipmentType: (uni.getSystemInfoSync().platform == "android") ? 1 : 2
      }).then(res => {
        if (res.versionNumber) {
          console.log([res.versionNumber, plus.runtime.version, this.cpr_version(res.versionNumber, plus.runtime.version)])
          if (this.cpr_version(res.versionNumber, plus.runtime.version)) {
            APPUpdate()
          } else {
            this.$refs.uToast.show({
              title: '当前已是最新版本~',
              type: 'default',
              position: 'bottom'
            })
          }
        }
      });
      // #endif
    },
  }
}
</script>

<style lang="scss">
page,
body {
  height: 100%;
}

.height {
  margin-top: -100rpx !important;
}

.unBg {
  background-color: unset !important;

  .user-info {
    .info {
      .name {
        color: #333333 !important;
        font-weight: 600;
      }

      .num {
        color: #333 !important;

        .num-txt {
          height: 38rpx;
          background-color: rgba(51, 51, 51, 0.13);
          padding: 0 12rpx;
          border-radius: 16rpx;
        }
      }
    }
  }

  .num-wrapper {
    color: #333 !important;
    font-weight: 600;

    .num-item {
      .txt {
        color: rgba(51, 51, 51, 0.7) !important;
      }
    }
  }

  .message {
    .iconfont {
      color: #333 !important;
    }

    .num {
      color: #fff !important;
      background-color: var(--view-theme) !important;
    }
  }

  .setting {
    .iconfont {
      color: #333 !important;
    }
  }
}

.cardVipB {
  background-color: #343A48;
  width: 100%;
  height: 124rpx;
  border-radius: 16rpx 16rpx 0 0;
  padding: 22rpx 30rpx 0 30rpx;
  margin-top: 16px;

  .left-box {
    .small {
      color: #F8D5A8;
      font-size: 28rpx;
      margin-left: 18rpx;
    }

    .pictrue {
      width: 40rpx;
      height: 45rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .btn {
    color: #BBBBBB;
    font-size: 26rpx;
  }

  .icon-xiangyou {
    margin-top: 6rpx;
  }
}

.cardVipA {
  position: absolute;
  background: url('~@/static/images/member.png') no-repeat;
  background-size: 100% 100%;
  width: 750rpx;
  height: 84rpx;
  bottom: -2rpx;
  left: 0;
  padding: 0 56rpx 0 135rpx;

  .left-box {
    font-size: 26rpx;
    color: #905100;
    font-weight: 400;
  }

  .btn {
    color: #905100;
    font-weight: 400;
    font-size: 24rpx;
  }

  .iconfont {
    font-size: 20rpx;
    margin: 4rpx 0 0 4rpx;
  }
}

.new-users {
  display: flex;
  flex-direction: column;
  height: 100%;

  .sys-head {
    position: relative;
    width: 100%;
    // background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: var(--view-theme);
      background-size: 100% auto;
      background-position: left bottom;
    }

    .sys-title {
      z-index: 10;
      position: relative;
      height: 43px;
      text-align: center;
      line-height: 43px;
      font-size: 36rpx;
      color: #FFFFFF;
    }
  }

  .head {
    // background: #fff;

    .user-card {
      position: relative;
      width: 100%;
      height: 380rpx;
      margin: 0 auto;
      padding: 35rpx 28rpx;
      background-image: url("~@/static/images/user01.png");
      background-size: 100% auto;
      background-color: var(--view-theme);

      .user-info {
        z-index: 20;
        position: relative;
        display: flex;

        .headwear {
          position: absolute;
          right: -4rpx;
          top: -14rpx;
          width: 44rpx;
          height: 44rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .live {
          width: 28rpx;
          height: 28rpx;
          margin-left: 20rpx;
        }

        .bntImg {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          text-align: center;
          line-height: 120rpx;
          background-color: unset;
          position: relative;

          .avatarName {
            font-size: 16rpx;
            color: #fff;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.6);
            height: 37rpx;
            line-height: 37rpx;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
          }
        }

        .avatar-box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;

          &.on {
            .avatar {
              border: 2px solid #FFAC65;
              border-radius: 50%;
              box-sizing: border-box;
            }
          }
        }

        .avatar {
          position: relative;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;

        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          padding: 15rpx 0;

          .name {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 31rpx;

            .vip {
              margin-left: 10rpx;

              image {
                width: 78rpx;
                height: 30rpx;
                display: block;
              }
            }
          }

          .num {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.6);

            image {
              width: 22rpx;
              height: 23rpx;
              margin-left: 20rpx;
            }
          }
        }
      }

      .message {
        align-self: flex-start;
        position: relative;
        margin-top: 15rpx;
        margin-right: 20rpx;

        .num {
          position: absolute;
          top: -8rpx;
          left: 18rpx;
          padding: 0 6rpx;
          height: 28rpx;
          border-radius: 12rpx;
          background-color: #fff;
          font-size: 18rpx;
          line-height: 28rpx;
          text-align: center;
          color: var(--view-theme);
        }

        .iconfont {
          font-size: 40rpx;
          color: #fff;
        }
      }

      .num-wrapper {
        z-index: 30;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 22rpx;
        // padding: 0 47rpx;
        color: #fff;

        .num-item {
          width: 33.33%;
          text-align: center;

          & ~ .num-item {
            position: relative;

            &:before {
              content: '';
              position: absolute;
              width: 1rpx;
              height: 28rpx;
              top: 50%;
              margin-top: -14rpx;
              background-color: rgba(255, 255, 255, 0.4);
              left: 0;
            }
          }

          .num {
            font-size: 42rpx;
            font-weight: bold;
          }

          .txt {
            margin-top: 8rpx;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      .sign {
        z-index: 200;
        position: absolute;
        right: -12rpx;
        top: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 60rpx;
        background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
        border-radius: 29rpx 4rpx 4rpx 29rpx;
        color: #282828;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .order-wrapper {
      background: #fff;
      margin: 0 30rpx;
      border-radius: 16rpx;
      position: relative;
      margin-top: -10rpx;

      .order-hd {
        justify-content: space-between;
        padding: 30rpx 20rpx 10rpx 30rpx;
        margin-top: 25rpx;
        font-size: 30rpx;
        color: #282828;

        .left {
          font-weight: bold;
        }

        .right {
          display: flex;
          align-items: center;
          color: #666666;
          font-size: 26rpx;

          .icon-xiangyou {
            margin-left: 5rpx;
            font-size: 26rpx;
          }
        }
      }

      .order-bd {
        display: flex;
        padding: 0 0;

        .order-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 20%;
          height: 140rpx;

          .pic {
            position: relative;
            text-align: center;

            .iconfont {
              font-size: 48rpx;
              color: var(--view-theme);
            }

            image {
              width: 58rpx;
              height: 48rpx;
            }
          }

          .txt {
            margin-top: 6rpx;
            font-size: 26rpx;
            color: #333;
          }
        }
      }
    }
  }

  .slider-wrapper {
    margin: 20rpx 30rpx;
    height: 130rpx;

    swiper,
    swiper-item {
      height: 100%;
    }

    image {
      width: 100%;
      height: 130rpx;
      border-radius: 16rpx;
    }
  }

  .user-menus {
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16rpx;

    .menu-title {
      padding: 30rpx 30rpx 40rpx;
      font-size: 30rpx;
      color: #282828;
      font-weight: bold;
    }

    .list-box {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }

    .item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      width: 25%;
      margin-bottom: 47rpx;
      font-size: 26rpx;
      color: #333333;

      image {
        width: 52rpx;
        height: 52rpx;
        margin-bottom: 18rpx;
      }


      &:last-child::before {
        display: none;
      }
    }

    button {
      font-size: 28rpx;
    }
  }

  .phone {
    color: #fff;
    background-color: #CCC;
    border-radius: 15px;
    width: max-content;
    padding: 0 10px;
  }

  .order-status-num {

    min-width: 12rpx;
    background-color: #fff;
    color: var(--view-theme);
    border-radius: 15px;
    position: absolute;
    right: -14rpx;
    top: -15rpx;
    font-size: 20rpx;
    padding: 0 8rpx;
    border: 1px solid var(--view-theme);
  }

  .support {
    width: 219rpx;
    height: 74rpx;
    margin: 54rpx auto;
    display: block;
  }
}

.card-vip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 690rpx;
  height: 134rpx;
  margin: -72rpx auto 0;
  background: url('~@/static/images/user_vip.png');
  background-size: cover;
  padding-left: 118rpx;
  padding-right: 34rpx;

  .left-box {
    font-size: 24rpx;
    color: #AE5A2A;

    .big {
      font-size: 28rpx;
    }

    .small {
      opacity: 0.8;
      margin-top: 10rpx;
    }
  }

  .btn {
    height: 52rpx;
    line-height: 52rpx;
    padding: 0 10rpx;
    text-align: center;
    background: #fff;
    border-radius: 28rpx;
    font-size: 26rpx;
    color: #AE5A2A;
  }

}

.setting {
  margin-top: 15rpx;
  margin-left: 15rpx;
  color: #fff;

  .iconfont {
    font-size: 40rpx;
  }
}

.page-footer {
  position: fixed;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: calc(98rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  box-sizing: border-box;
  border-top: solid 1rpx #F3F3F3;
  background-color: #fff;
  box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

  .foot-item {
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;

    .count-num {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40rpx;
      height: 40rpx;
      top: 0rpx;
      right: -15rpx;
      color: #fff;
      font-size: 20rpx;
      background-color: #FD502F;
      border-radius: 50%;
      padding: 4rpx;
    }
  }

  .foot-item image {
    height: 50rpx;
    width: 50rpx;
    text-align: center;
    margin: 0 auto;
  }

  .foot-item .txt {
    font-size: 24rpx;


    &.active {
    }
  }
}

.new-users {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.share-container {
  width: 100%;

  .share-title {
    width: 100%;
    height: 90rpx;
    flex-wrap: wrap;
    border-bottom: 1rpx solid #EFF1F7;

    .title-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  .shareList {
    width: 100%;
    flex-wrap: wrap;
    border-bottom: 1rpx solid #EFF1F7;
    margin-top: 45rpx;

    .items-container {
      width: 25%;
      margin-bottom: 30rpx;

      .icon-box {
        width: 95rpx;
        height: 95rpx;
      }

      .modeName {
        font-size: 24rpx;
        font-weight: 500;
        color: #333333;
        margin-top: 15rpx;
      }
    }
  }

  .cancelbox {
    width: 100%;
    height: 90rpx;

    .canceltext {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
